<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button defaultHref="/home" text="Back" color="primary"></ion-back-button>
      </ion-buttons>
      <ion-title>TTS</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-label>Input Text:</ion-label>
          <ion-item>
            <ion-input type="text"  [(ngModel)]="inputText"></ion-input>
          </ion-item>

          <ion-item>
            <span>0</span>
            <ion-range min="0" max="1" step="0.1" [(ngModel)]="speedRate">
              <ion-icon range-left name="volume-low"></ion-icon>
              <ion-icon range-right name="volume-high"></ion-icon>
            </ion-range>
            <span>1</span>
          </ion-item>
        
          <ion-item>
            <ion-button color="primary" expand="full" (click)="speak()">Speak Now</ion-button>
            <ion-button color="primary" expand="full" (click)="stop()">Stop Now</ion-button>
          </ion-item>
        
          <ion-item>
            <ion-progress-bar [value]="progress"></ion-progress-bar>
          </ion-item>
        
          <ion-item *ngIf="errorMessage">
            <ion-text color="danger">{{errorMessage}}</ion-text>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

</ion-app>
